<template>
  <div class="content">
    <div v-show = "this.show_scholar === false" class="no_scholar">
      <img src="../../assets/no_history.png" class="image" alt="">
      <p style="margin-top:-5em; margin-left: 9em">没有关注任何人~</p>
    </div>
    <div v-for="item in followlist" :key="item.id" style="font-size: 15px;" v-show="this.show_scholar === true">
      <el-card shadow="hover">
        <div class="essay">
          <el-row style="display: inline-block">
            <img :src="scholarphoto_url" alt="" style="width:5em; height:5em; border-radius: 50%; float:left">
            <div class="brief">
              <span style="font-size: 15px; margin-left:1em">{{item.name}}</span>
            </div>
          </el-row>
          <br/>
          <span style="font-size: 12px; color:deepskyblue">学术机构: {{item.constitution}} </span>
          <br>
          <span style="font-size: 12px; color:deepskyblue">论文被引用总数: {{item.refertimes}} </span>
          <span style="font-size: 12px; color:deepskyblue">论文成果总数: {{item.totalpapers}}</span>
          <br/>
          <hr/>
          <el-row style="height: 2em">
            <el-button type="warning" icon = "el-icon-close" style="font-size: 5px" size="mini" @click="StopFollowing(item.id_backend)">取消关注</el-button>
            <el-button type="primary" icon = "el-icon-search" style="font-size: 5px" size="mini" @click="GoToScholar(item.id_backend)">进入主页</el-button>
          </el-row>
        </div>
      </el-card>
      <br/>
    </div>
  </div>
</template>

<script>
export default {
  name: "personalfollow_author",
  data(){
    return{
      scholarphoto_url: require("../../assets/defaultHeader.png"),
      followlist: [],
      show_scholar: false,
    }
  },
  mounted(){
    this.GetFollowScholar();
  },
  methods:{
    getCookie(name) {
      var value = '; ' + document.cookie
      var parts = value.split('; ' + name + '=')
      if (parts.length === 2) return parts.pop().split(';').shift()
    },
    GetFollowScholar(){
      const self = this;
      self.axios({
        method: 'post',
        url: '/get_follow/',
        data: {
          user_name: this.$store.state.username,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        const obj = res.data;
        this.SetFollowList(obj.followlist);
      }).catch(err => {
        console.log(err);
        this.$message("获取关注信息失败")
      })
    },
    SetFollowList(list){
      let i;
      //没有关注的学者
      if(list.length === 0){
        this.show_scholar = false;
      }
      //有关注学者
      else{
        this.followlist.splice(0, this.followlist.length);
        for(i = 0; i < list.length; i++){
          this.followlist.push({id: i + 1, name: list[i].scholar, constitution: list[i].constitute, refertimes: list[i].refertimes, totalpapers: list[i].essaynum, id_backend: list[i].scholar_id})
        }
        this.show_scholar = true;
      }
    },
    StopFollowing(id){
      const self = this;
      self.axios({
        method: 'post',
        url: '/delete_follow/',
        data: {
          user_name: this.$store.state.username,
          scholar_id: id,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        console.log(res.data);
        const obj = res.data;
        if(obj.code === 1){
          this.GetFollowScholar();
        }
        else{
          this.$message("删除关注信息失败")
        }
      }).catch(err => {
        console.log(err);
        this.$message("操作失败")
      })
    },
    GoToScholar(id){
      let str = '/author/' + id.toString();
      this.$router.push(str);
    }
  }
}
</script>

<style scoped>
.content{
  width: 38em;
}
.essay{
  width:35em;
  margin-left:5%;
}
.brief{
  width: 30em;
  float: right;
  height: 5em;
}
.no_scholar{
  font-size: 15px;
  margin-top:4em;
  margin-left:10em;
}
.image{
  height: 8em;
  width: 8em;
}
</style>